<script setup>

import {Plus} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";
import {addLike, deleteLike, getVideoById, queryLike} from '@/util/video/video.js'
import {onMounted, ref} from "vue";
//根据id拿到视频的信息 然后渲染出来
const route = useRoute();
//完成视频的点赞  评论功能
console.log(route.query.id)
const VideoBaseData = ref({})
const getById = async () => {
  const res = await getVideoById(route.query.id)
  VideoBaseData.value = res.data.data;

}
onMounted(() => {
  getById()
  queryVideoLike()
})
const likeData = ref({
  userId: '1',
  videoId: route.query.id
})
//查询数据库中有无这一条数据 如果 那么就是true 如果没有为false
const isLike = ref(true)

const Like = async () => {
  const res = await addLike(likeData.value)
  isLike.value = true
   queryVideoLike()
}
//定义点赞的数目
const likes = ref('')
//查询点赞
const queryVideoLike = async () => {
  const res = await queryLike(route.query.id)
  likes.value = res.data.data
}

// 取消点赞
const DisLike = async () => {
  const res = await deleteLike(likeData.value)
  isLike.value = false
  queryVideoLike(route.query.id)
}

import VideoComment from '@/views/video/VideoComment.vue'
</script>

<template>
  <el-card style="max-width: 480px" v-model="VideoBaseData">
    <template #header>
      <div class="card-header">
        <span> 视频作者：{{ VideoBaseData.username }}</span> <br>
        <span> 创作时间: {{ new Date(VideoBaseData.createTime) }}</span> <br>
        <span>视频名称{{ VideoBaseData.videoName }}</span>
        <!--         路由跳转过去-->
      </div>
    </template>
    <!--    后台的视频表有会有字段 包括对视频的评论等-->
    <el-image :src=VideoBaseData.videoCoverUrl alt="图片加载失败"/>
    <template #footer>
    </template>
  </el-card>
  <el-form>
    <el-form-item>
      <!--      显示点赞的数量 -->
      <el-button type="primary" @click="isLike==false?Like():DisLike()" :icon="Plus">点赞:{{ likes }}</el-button>
      <el-button type="primary" :icon="Plus">投币:{{ likes }}</el-button>
      <el-button type="primary" :icon="Plus">收藏:{{ likes }}</el-button>
      <el-button type="primary" :icon="Plus">转发:{{ likes }}</el-button>
    </el-form-item>
  </el-form>
  <!--  根据id拿到所有视频的数据  v-for 通过card遍历-->
  <!--  点击回复  需要 当前的用户id 还需要拿回复用户的id 还有是哪一条怕评论的-->
  <VideoComment></VideoComment>
</template>

<style scoped>

</style>
